<template>
  <div>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="handleCateAdd"
          v-hasPermi="['base:supplierCategory:add']"
          >新增</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-edit"
          size="mini"
          :disabled="!nodeId||nodeId=='1'"
          @click="handleCateUpdate"
          v-hasPermi="['base:supplierCategory:edit']"
          >修改</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-delete"
          size="mini"
          :disabled="!nodeId||nodeId=='1'"
          @click="handleCateDelete"
          v-hasPermi="['base:supplierCategory:remove']"
          >删除</el-button
        >
      </el-col>
    </el-row>
    <div class="head-container">
      <el-tree
        :data="categoryList"
        :props="defaultProps"
        ref="tree"
        :highlight-current="true"
        default-expand-all
         node-key="supplierCategoryId"
        :expand-on-click-node="false"
        @node-click="handleNodeClick"
      />
    </div>
    <!-- 添加或修改参数定义分类对话框 -->
    <el-dialog :close-on-click-modal="false"
      :title="categoryTitle"
      :visible.sync="cateOpen"
      width="500px"
      append-to-body
    >
      <el-form
        ref="categoryForm"
        :model="categoryForm"
        :rules="rules"
        label-width="80px"
      >
        <el-form-item label="上级分类">
          <treeselect
            v-model="categoryForm.parentId"
            :options="categoryList"
            :normalizer="normalizer"
            :show-count="true"
            placeholder="选择上级分类"
          />
        </el-form-item>
        <el-form-item label="名称" prop="supplierCategoryName">
          <el-input
            v-model="categoryForm.supplierCategoryName"
            placeholder="请输入名称"
          />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="categoryForm.remark" placeholder="请输入备注" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary"  :loading="btnLoading" v-funThrottle="[categorySubmitForm]">确 定</el-button>
        <el-button @click="categoryCancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listCategory,
  getCategory,
  addCategory,
  updateCategory,
  delCategory,
} from "@/api/base/supplier";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
  name: "leftTree",
  components: { Treeselect },
  data() {
    return {
      cateOpen: false,
      categoryForm: {
        parentId: "1",
        supplierCategoryName: null,
        remark: null,
      },
      defaultProps: {
        children: "children",
        label: "supplierCategoryName",
      },
      categoryList: [],
      categoryTitle: "",
      btnLoading:false,
      rules: {
        supplierCategoryName: [
          {
            required: true,
            message: "供应商分类名称不能为空",
            trigger: "blur",
          },
        ],
      },
      nodeId: null,
    };
  },
  created() {
    this.getCategoryList(); //分类数据
  },
  methods: {
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.supplierCategoryId,
        label: node.supplierCategoryName,
        children: node.children,
      };
    },
    getCategoryList() {
      listCategory().then((response) => {
        this.categoryList = response.data;
        this.$emit("cateChange");
         this.$nextTick(()=>{
           document.querySelector('.el-tree-node__content').click()
        })
      });
    },
    categoryCancel() {
      this.cateOpen = false;
      this.categoryReset();
    },
    setNodeId(val){
      this.$refs.tree.setCurrentKey(val);
      let node = this.$refs.tree.getNode(val);
      this.handleNodeClick(node.data);
    },
    categoryReset() {
      this.categoryForm = {
        parentId: this.nodeId!=='1'?this.nodeId:'1',
        supplierCategoryName: null,
        remark: null,
      };
      this.resetForm("categoryForm");
    },
    handleNodeClick(data) {
      this.nodeId = data.supplierCategoryId;
      this.$emit("getParentId", 1, this.nodeId);
    },
    categorySubmitForm() {
      this.$refs["categoryForm"].validate((valid) => {
        if (valid) {
          this.btnLoading=true
          if (this.categoryForm.supplierCategoryId != null) {
            updateCategory(this.categoryForm).then((response) => {
              this.msgSuccess("修改成功");
              this.cateOpen = false;
              this.getCategoryList();
            this.btnLoading=false
            }).catch(()=>{
              this.btnLoading=false
            });
          } else {
            addCategory(this.categoryForm).then((response) => {
              this.msgSuccess("新增成功");
              this.cateOpen = false;
              this.getCategoryList();
            this.btnLoading=false
            }).catch(()=>{
              this.btnLoading=false
            });
          }
        }
      });
    },
    handleCateAdd() {
      this.categoryReset();
      this.cateOpen = true;
      this.categoryTitle = "添加供应商分类";
    },
    handleCateUpdate() {
        this.categoryReset();
        getCategory(this.nodeId).then((response) => {
        this.categoryForm = response.data;

        this.cateOpen = true;
        this.categoryTitle = "修改供应商分类";
      });
    },
    handleCateDelete() {
      let _this=this
      this.$confirm(
        '是否确认删除该分类吗?',
        "警告",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",closeOnClickModal:false,
          type: "warning",
        }
      )
        .then(function () {
          return delCategory(_this.nodeId);
        })
        .then(() => {
          this.getCategoryList();
          this.msgSuccess("删除成功");
        });
    },
  }
};
</script>

<style>
</style>
